import { Radio } from 'antd';
import { RadioChangeEvent } from 'antd/lib/radio';
import { useDispatch } from 'dva';
import React, { useEffect, useState } from 'react';
import { ISurveyHook } from '../../../utils/Survey/SurveyHook';
import AuthCompount from '../../AuthCompount/AuthCompount';
import './FormRadio.scss';
const isPc = window.screen.width > 500;
// tslint:disable-next-line:no-any
declare var window: any;
/**
 * 单选框 FormRadio
 */

function FromRadio(props: ISurveyHook) {
  const formObj = props.formObj.subjectData;
  const [val, setVal] = useState(props.formObj.subjectData.defaultValue);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'survey/changeForm',
      payload: {
        props,
        val,
      },
    });
  }, [val]);
  function radioChange(str: RadioChangeEvent) {
    setVal(str.target.value);
  }
  // 其他输入
  function otherInput(str: React.ChangeEvent<HTMLInputElement>) {
    if (str.currentTarget.value.includes(':')) {
      alert('不能输入英文冒号');
      setVal('');
      return;
    }
    setVal(`${props.formObj.subjectData.otherInput}:${str.currentTarget.value}`);
  }

  function getDefaultValue() {
    if (val) {
      return val.split(':')[1];
    }
    return '';
  }
  /**
   * 用户点击回显上次方式的监听
   * 直接触发当前组件的渲染
   */
  // tslint:disable-next-line:no-any
  window[`onlastSurvey_${props.formObj.subjectData.field}`] = (value: any) => {
    setVal(value);
  };
  return (
    <div id="FromRadio">
      <div className="form_box">
        <div className="tit_box">
          <AuthCompount isShow={!!props.formObj.validatorData.required}>
            <div
              // tslint:disable-next-line:jsx-no-multiline-js
              className={formObj.errMsg ? 'cl star' : 'star'}
            >
              *
            </div>
          </AuthCompount>
          <div>{formObj.subjectName}</div>
        </div>
        <AuthCompount isShow={isPc}>
          <div className="errMsg">{formObj.errMsg}</div>
        </AuthCompount>
      </div>
      <AuthCompount isShow={!!formObj.explain}>
        <div className="explain">（说明：{formObj.explain}）</div>
      </AuthCompount>
      <Radio.Group onChange={radioChange} value={val} defaultValue={formObj.defaultValue} className="rad">
        {// tslint:disable-next-line:jsx-no-multiline-js
        formObj.radios &&
          formObj.radios.map(item => (
            <Radio key={item.name} value={`${item.value}`}>
              {item.name}
            </Radio>
          ))}
      </Radio.Group>
      <AuthCompount
        // tslint:disable-next-line:jsx-no-multiline-js
        isShow={val && val.includes(props.formObj.subjectData.otherInput)}
      >
        <input
          className="form_input"
          // tslint:disable-next-line:jsx-no-multiline-js
          defaultValue={getDefaultValue()}
          onChange={otherInput}
        />
      </AuthCompount>
      <AuthCompount isShow={!isPc}>
        <div className="m_errMsg">{formObj.errMsg}</div>
      </AuthCompount>
    </div>
  );
}
export default FromRadio;
